<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="format-detection" content="telephone=no">
        
        <title>发券记录</title>
        
        <link rel="stylesheet" href="css/record.css?t=201611301751" />
    </head>
    <body id="coupon" v-cloak>
    	<template v-if="retFlag!='0' && totalSize!=0">
		<!--发券提示-->
		<div class="coupon-tips"><template v-if="timeRetFlag!='0'">您已累计发券<span>{{sendTotalTimes}}</span>张，本月已发<span>{{sendMonthTimes}}</span>张</template></div>
		<!--发券记录列表-->
		<div class="record-list" v-infinite-scroll="loadMore()" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
			<a class="item" href="javascript:;" v-for="item in items" @click="couponDetail(item)">
				<div class="phone"><span class="sprites i-member-icon"></span><span>{{item.mobile}}</span></div>
				<div class="info">
					<p class="name">{{item.activityName}}</p>
					<p class="time">{{item.sendTime}}</p>
					<span class="sprites i-common-arrow"></span>
				</div>
			</a>
		</div>
		<!--loading-->
		<div class="record-loading" v-show="loadingShow">
			<template v-if="!noData">
				<span class="icon-loading"></span><span>加载中...</span>
			</template>
			<template v-else><span>没有更多记录了</span></template>
			
			<!--<span>没有更多记录了</span>-->
		</div>
		</template>
		<template v-else>
		<!--暂无记录-->
		<div class="no-data">
			<div class="icon-nodata"></div>
			<div class="text">暂无发券记录</div>
		</div>
		</template>
		
		<!--弹层-->
		<div class="popup" v-show="detailShow">
			<div class="popup-bg">
				<div class="coupon-box">
					<div class="title">
						<div class="name"><span class="sprites i-shop-icon"></span>{{activityName}}</div>
						<a class="close" href="javascript:;" @click="detailShow = false"><span class="sprites i-pop-delete"></a>
					</div>
					<div class="line-bg"></div>
					<div class="content">
						<div class="info">
							<p class="price">&yen;<span>{{couponValue}}</span></p>
							<p class="tips">{{couponRule}}</p>
							<p class="date">有效期：{{couponStartTime}} 至 {{couponEndTime}}</p>
						</div>
						<div class="explain">
							<h3>发券对象</h3>
							<p>{{mobile}}</p>
							<h3>发券时间</h3>
							<p>{{sendTime}}</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<script src="js/zepto.min.js" type="text/javascript"></script>
		<script src="js/vue.min.js" type="text/javascript"></script>
		<script src="js/vue-resource.min.js" type="text/javascript"></script>
		<script src="js/vue-infinite-scroll.js" type="text/javascript"></script>
		<script src="js/common.js?t=201611301751" type="text/javascript"></script>
		<script type="text/javascript">
			var vm = new Vue({
                el: '#coupon',
                data: {
	                items: [],
	                sendMonthTimes:"",
	                sendTotalTimes:"",
	                timeRetFlag:"",
	                retFlag:null,
	                detailShow: false,
	                loadingShow: false,
	                noData: false,
	                
	                activityName:"",
	                couponValue:"",
	                couponStartTime:"",
	                couponEndTime:"",
	                mobile:"",
	                sendTime:"",
	                couponRule:"",
	                pageLen:"",
	                totalSize:null,
	                totalPage:"",
	                pageNum: 1,
	                busy: false,
	                
                    err: false,
                    errCtt: ""
                },
                computed: {
                    
                },
                methods: {
                	couponRecord: function(page,size){
                		this.$http.post(DI.couponRecord, {
							pageNo: page,
							pageSize: size
						},{before:function(){
							this.loadingShow = true;
						}}).then(function(res) {
							if(res!=null && res.data.idsIntercepted==true){
								location.href = DI.login + "?redirectUrl=" + location.href;
							    return;
							}
							var result = res.data;
							if(result.retFlag!="0") {
//								vm.tempData = result.data.records;
								vm.sendMonthTimes = result.data.sendMonthTimes;
								vm.sendTotalTimes = result.data.sendTotalTimes;
								vm.retFlag = result.retFlag;
								vm.pageLen = result.data.records.length;
//								vm.pageLen = result.data.record.length;
								vm.totalSize = result.data.totalSize;
								vm.totalPage = Math.ceil(result.data.totalSize/size);
								if(page==vm.totalPage){
									vm.loadingShow = true;
									vm.noData = true;
								}else{
									vm.loadingShow = false;
									vm.noData = false;
								}
								
//								for (var i = 0; i < result.data.record.length; i++) {
								for (var i = 0; i < result.data.records.length; i++) {
							    	this.items.push(result.data.records[i]);
//							    	this.items.push(result.data.record[i]);
							    }
							} else {
								
							}
			
						}, function(req) {
			
						});
                	},
                	couponDetail: function(item){
                    	vm.detailShow = true;
                    	vm.activityName = item.activityName;
                    	vm.couponValue = item.couponValue;
                    	vm.couponStartTime = item.couponStartTime;
                    	vm.couponEndTime = item.couponEndTime;
                    	vm.mobile = item.mobile;
                    	vm.sendTime = item.sendTime;
                    	vm.couponRule = item.couponRule;
                   	},
                   	loadMore: function() {
                   		if(this.totalPage>1 && this.pageNum!=this.totalPage){
                   			this.busy = true;
							
							setTimeout(function () {
								vm.pageNum++;
								vm.couponRecord(vm.pageNum,10);
//							    console.log(count++);
							    vm.busy = false;
							}, 1000);
                   		}
    				}
                },
                ready: function(){
                	this.couponRecord(1,10);
                }
            });
		</script>
    </body>
</html>